<template>
  <div class="product-item">
    <div class="checkbox">
      <input
        type="checkbox"
        :checked="product.selected"
        @change="toggleSelect"
      >
    </div>
    <div class="product-info">
      <img :src="product.image" :alt="product.itemId">
      <div class="details">
        <h3>{{ product.itemTitle }}</h3>
        <p>￥{{ product.price }}</p>
      </div>
    </div>
    <div class="actions">
      <button class="quantity-btn" @click="updateQuantity(-1)">-</button>
      <span>{{ product.quantity }}</span>
      <button class="quantity-btn" @click="updateQuantity(1)">+</button>
    </div>
    <div class="operations">
      <button @click="toggleFavorite" :class="{ 'favorited': product.favorite }">
        {{ product.favorite ? '已收藏' : '收藏' }}
      </button>
      <button @click="removeProduct" class="delete-btn">删除</button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  product: {
    type: Object,
    required: true,
    default: () => ({
      itemId: '',
      itemTitle: '',
      price: '',
      quantity: 1,
      image: '',
      status: '',
      selected: false,
      favorite: false
    })
  }
})

const emit = defineEmits(['update', 'remove', 'toggle-select', 'toggle-favorite'])

function updateQuantity (quantity) {
  const newQuantity = Math.max(0, props.product.quantity + quantity)
  emit('update', { id: props.product.itemId, quantity: newQuantity })
}

function removeProduct () {
  emit('remove', props.product.itemId)
}

function toggleSelect () {
  emit('toggle-select', { id: props.product.itemId, selected: !props.product.selected })
}

function toggleFavorite () {
  emit('toggle-favorite', props.product.itemId)
}
</script>

<style scoped>
/* 样式保持不变 */
.product-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid #eee;
  gap: 1rem;
}

.product-info {
  display: flex;
  gap: 1rem;
  flex: 1;
}

.product-info img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.quantity-btn {
  padding: 4px 12px;
  border: 1px solid #ddd;
  background: white;
  cursor: pointer;
}

.operations {
  display: flex;
  gap: 0.5rem;
}

.delete-btn {
  color: #ff4d4f;
  border: 1px solid #ff4d4f;
  background: white;
  padding: 4px 12px;
  cursor: pointer;
}

.favorited {
  color: #faad14;
  border: 1px solid #faad14;
}
</style>
